<template>
  <div class="micro-search-box">
    <div class="design-preview-controller">
      <van-search
        :placeholder="formData.placeholder || '请输入搜索关键词'"
        :background="formData.background"
        :shape="formData.shape"
      />
    </div>

    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">公告</div>
        <el-form ref="formData" :model="formData" label-width="100px">
          <el-form-item label="公告:">
            <el-input v-model="formData.placeholder" size="small" placeholder="请输入搜索关键词" />
          </el-form-item>
          <el-form-item label="搜索框形状:">
            <el-select v-model="formData.shape" placeholder="请选择">
              <el-option key="square" label="square" value="square" />
              <el-option key="round" label="round" value="round" />
            </el-select>
            <el-button class="reColor" @click="formData.mode='square'">重置</el-button>
          </el-form-item>
          <el-form-item label="背景颜色:">
            <el-color-picker v-model="formData.background" />
            <el-button class="reColor" @click="formData.background='#fff'">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import index from './index.js'

  export default index
</script>
